<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <title>日记人生</title>
    <link rel="stylesheet" href="lib/bootstrap-4.0.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://www.bootcss.com/p/buttons/css/buttons.css">
    <link rel="stylesheet" href="css/style.css">



    <style>
        .logo {
            width: 60%;
            /*height: 500px;*/
            margin: auto;
            padding-top:50px;
        }

        .name {
            text-align: center;
            font-size: 35px;
            /*text-shadow: 3px 5px grey, 1px 1px #333;*/
            color:#c00;
        }

        .img {
            width: 48%;
            height: 53%;
            margin: auto;
            margin-top: 38px;
        }

        .img img {
            width: 100%;
            height: 100%;
        }

        .search {
            width: 60%;
            height: 100px;
            margin: auto;
            text-align: center;
            -moz-border-radius: 15px;
            border-radius: 15px;
        }

        .noExtension {
            width: 60%;
            height: 100px;
            margin: auto;
            font-size: 15px;
        }

        #search_value {
            width: 50%;
            height: 50px;
            box-shadow: 3px 5px grey, 1px 1px #333;
            -moz-border-radius: 15px;
            border-radius: 15px;
        }

        .search button {
            width: 18%;
            height: 50px;
            margin-left: 6px;
            box-shadow: 3px 5px grey, 1px 1px #333;
            -moz-border-radius: 15px;
            border-radius: 15px;
        }

         @keyframes rotate {
            0% { transform:rotateY(0deg);}
            25% { transform:rotateY(180deg);}
            50% { transform:rotateY(0deg);}
            75% { transform:rotateY(180deg);}
            100% { transform:rotateY(0deg);}
        }

        .logo_rotate {
			/*
            animation: rotate 10s infinite;
            animation-fill-mode: forwards;
            animation-timing-function: linear;
				*/
            /*  当动画结束时，让<div>元素保留上一个关键帧的样式值 */
        }

         .result_success {
            width: 60%;
            margin: auto;
        }

        .result_faile{
            width: 60%;
            margin: auto;
        }

        .add_banner{
            width: 60%;
            margin: auto;
        }

        .add_banner input{
            width: 80%;
            height: 50px;
            box-shadow: 3px 5px grey, 1px 1px #333;
        }

        .add_banner button{
            width: 18%;
            height: 50px;
            margin-left: 6px;
            box-shadow: 3px 5px grey, 1px 1px #333;
        }

        #search_banner{
            font-size: 40px;
            border-bottom: 1px solid black;
        }

        p{
            text-indent:2em;
            font-size: 20px;
        }

        .hide{
            display: none;
        }

        .contenner{
            background: url("img/bg.jpg ");
            height: 100%;
            position:relative;
            z-index: 10000;
        }

        .author{
            text-align: right;
        }
        .author p{
            display: inline-block;
            font-size: 14px;
        }
        .footer{
            position: fixed;
            bottom: 0;
            text-align: center;
            width:100%;
        }
    </style>

</head>

<body>
    <div class="contenner">
        <div class="logo">
            <div class="name">日记人生</div>

        </div>
        <div class="noExtension hide" id="noExtension">
            注意: 请安装 <a target="_blank" href="https://github.com/ChengOrangeJu/WebExtensionWallet" style="color: red;">星云钱包拓展</a>
        </div>
        <div class="search">
            <input id="search_value" type="text" placeholder="请输入日记">
            <button id=search>查询日记</button>
        </div>

        <div class="result_success hide">
            <div id=search_banner></div>
            <p id=search_result> wait for content </p>
            <div class="author">
                <i><p> 发布人:</p> <p id=search_result_author>by 卖女孩的小火彩</p></i>
            </div>
        </div>

        <div class="result_faile hide">
            没有找到 &nbsp;&nbsp;<i id="result_faile_add" style="color:red">asd</i>&nbsp;&nbsp; 日记人生. <button class="button button-pill button-primary" id="add">写入新的日记</button>
        </div>

        <div class="add_banner hide">
            <input type="text" id="add_value" placeholder="开始记录生活点滴">
            <button id="push">保存</button>
            </div>



    </div>
    <script src=lib/jquery-3.3.1.min.js></script>
    <script src=lib/nebPay.js></script>
    <script src=lib/bootstrap-4.0.0-dist/js/bootstrap.min.js></script>
    <script>
        var NebPay = require("nebpay");     //https://github.com/nebulasio/nebPay
        var nebPay = new NebPay();

        $("#search_value").attr("disabled",true)
        $("#search").attr("disabled",true)


        //to check if the extension is installed
        //if the extension is installed, var "webExtensionWallet" will be injected in to web page
        if(typeof(webExtensionWallet) === "undefined"){
            //alert ("Extension wallet is not installed, please install it first.")
            $("#noExtension").removeClass("hide")
        }else{
            $("#search_value").attr("disabled",false)
            $("#search").attr("disabled",false)
        }

        var dappAddress = "n21eNNme83NZewPLNt1ZgcDgoqZGpJ8bXhD";

        // 搜索功能: 查找Super-Dictionary 中有没有该词条
    $("#search").click(function(){
        // $("#search_value").val() 搜索框内的值

        var to = dappAddress;
        var value = "0";
        var callFunction = "get";
        var callArgs = "[\"" + $("#search_value").val() + "\"]"; //in the form of ["args"]
        nebPay.simulateCall(to, value, callFunction, callArgs, {    //使用nebpay的simulateCall接口去执行get查询, 模拟执行.不发送交易,不上链
            listener: cbSearch      //指定回调函数
        });
    })

    //return of search,
    function cbSearch(resp) {
        var result = resp.result
        console.log("return of rpc call: " + JSON.stringify(result))

        if (result === 'null'){
            $(".add_banner").addClass("hide");
            $(".result_success").addClass("hide");

            $("#result_faile_add").text($("#search_value").val())

            $(".result_faile").removeClass("hide");
        } else{
            //if result is not null, then it should be "return value" or "error message"
            try{
                result = JSON.parse(result)
            }catch (err){
                //result is the error message
            }

            if (!!result.key){      //"return value"
                $(".add_banner").addClass("hide");
                $(".result_faile").addClass("hide");

                $("#search_banner").text($("#search_value").val())
                $("#search_result").text(result.value)
                $("#search_result_author").text(result.author)

                $(".result_success").removeClass("hide");
            } else {        //"error message"
                $(".add_banner").addClass("hide");
                $(".result_faile").addClass("hide");

                $("#search_banner").text($("#search_value").val())
                $("#search_result").text(result)
                $("#search_result_author").text("")

                $(".result_success").removeClass("hide");
            }

        }

    }

    // 添加信息功能: 像super-dictionary 中添加词条
    $("#add").click(function() {
        $(".result_faile").addClass("hide");
        $(".add_banner").removeClass("hide");

        $("#add_value").val("")
    })

    $("#push").click(function() {

        var to = dappAddress;
        var value = "0";
        var callFunction = "save"
        var callArgs = "[\"" + $("#search_value").val() + "\",\"" + $("#add_value").val() + "\"]"

        nebPay.call(to, value, callFunction, callArgs, {    //使用nebpay的call接口去调用合约,
            listener: cbPush
        });
    });

    function cbPush(resp) {
        console.log("response of push: " + resp)
    }


</script>

    <canvas id="canvas" width="1440" height="900"></canvas>

    <script src="js/index.js"></script>

<div class="footer">
    <p style=" text-align:center;font-size:12px;color:#aaa">日记人生采用星云链技术，时刻分享您的点滴生活。</p>
    <p><img style="height:1.5rem;" src="" alt=""></p>
</div>


</body>

</html>
